<template>
  <div class="app">
    <div class="safe-area"></div>
    <navigation-bar @click-left="handleBack"></navigation-bar>
    <div class="content">
      <keep-alive :include="keepAliveList">
        <router-view />
      </keep-alive>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import NavigationBar from '@/components/navigation-bar';
import { ImagePreview } from 'vant';

@Component({
  name: 'APP',
  components: {
    NavigationBar,
    ImagePreview,
  }
})
export default class APP extends Vue {
  private get isHome() {
    return this.$route.name === 'Home';
  }
  private get needKeepAliveRoute() {
    if (!this.$route.name) return false;
    return ['Tester', 'History', 'Document', 'SearchStation', 'SearchDevice'].includes(this.$route.name);
  }
  private get keepAliveList() {
    if (this.needKeepAliveRoute) {
      return ['Tester'];
    }
    return [];
  }
  mounted() {
    window.PlugInFn?.controlInplugIn(true);
    window.PlugInFn?.controlHomeShow(true); // 显示全屏
    // 物理返回按钮绑定
    window.toolboxOnBack = this.handleBack;
    // 避免重复刷新
    this.$router.push({ name: 'Home' });
  }

  handleBack() {
    if (!this.$route) return;

    if (this.isHome) {
      this.killLightApp()
      return;
    }
    if (this.$store.state.imagePreviewCloseFn) {
      this.$store.state.imagePreviewCloseFn();
      this.$store.dispatch('setImagePreviewCloseFn', null);
      return;
    }
    this.$router.back();
  }

}
</script>

<style lang="scss" scoped>
.app {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
}

.safe-area {
  height: $safe-area-top;
}

.content {
  // 46px 为导航栏高度
  height: calc(100vh - $safe-area-top - 46px);
  overflow: scroll;
}
</style>
